<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="商务合作" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

<!--		<image class="page_bg" :src="BestImgUrl + 'Frame1976_bg.png'" mode="widthFix"></image>-->

<!--		<view class="ruzhu_bg">-->
<!--			<image :src="BestImgUrl + 'Frame33291.jpg'" mode="widthFix"></image>-->
<!--		</view>-->

		<view class="content_wrap">

			<view class="input_box">
				<view class="input_box_item">
					<view class="titme"><span>*</span>合作类型</view>
					<view class="dizhi2">
						<view class="item_name" v-for="(items,indexs) in list2" :key="indexs">
							<view class="item_name_sub" @click="leixing(items,indexs)" :class="[list2idx == indexs?'xuanzc':'']">{{items}}</view>
						</view>
					</view>
				</view>
				<view class="input_box_item">
					<view class="titme"><span>*</span>所在城市</view>
					<view class="dizhi" @click="Cityshow=true">
						<u-input v-model="city" @click="Cityshow=true" type="text" input-align="right" :disabled="true" :border="false" placeholder="请选择所在城市" />
					</view>
				</view>
				<view class="input_box_item">
					<view class="titme"><span>*</span>实体</view>
					<view class="dizhi2">
						<view class="item_name" v-for="(item,index) in list1" :key="index">
							<view class="item_name_sub" @click="shiti(item,index)"
								:class="[list1idx == index?'xuanzc':'']">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="input_box_item" v-if="shopType === 1">
					<view class="titme"><span>*</span>{{gsNameType}}</view>
					<view class="dizhi">
						<u-input v-model="gsName" maxlength="30" type="text" input-align="right" :border="false" :placeholder="gsNameTypeinput" />
					</view>
				</view>
			</view>

			<view class="input_box">
				<view class="input_box_item">
					<view class="titme"><span>*</span>联系人</view>
					<view class="dizhi">
						<u-input v-model="contacts" maxlength="20" type="text" input-align="right" :border="false"
							placeholder="请输入联系人" />
					</view>
				</view>
				<view class="input_box_item">
					<view class="titme"><span>*</span>联系电话</view>
					<view class="dizhi">
						<u-input v-model="phone" type="number" maxlength="11" input-align="right" :border="false"
							placeholder="请输入联系电话" />
					</view>
				</view>
			</view>
		</view>

		<view class="oktijiao">
			<view class="lhb_btn3" @click="subBtn()">提交申请</view>
		</view>

		<u-picker mode="region" v-model="Cityshow" :params="params" @confirm="cityconfirm"></u-picker>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					province: true,
					city: true,
					area: true,
					timestamp: true, // 1.3.7版本提供
				},
				Cityshow: false,
				BestImgUrl: app.globalData.imgurlBwc,
				list1: ['企业', '个人'],
				list1idx: 0,
				list2idx: 0,
				list2: ['城市运营商', '推广合作', '其他'],
				
				gsNameType:'公司名称',
				gsNameTypeinput: '请输入公司名称',
				type: '1',
				city: '',
				shopType: 1,
				gsName: '',
				contacts: '',
				phone: ''

			}
		},
		methods: {
			shiti(data, idx) {
				let that = this
				that.list1idx = idx
				if (idx == 0) {
					that.shopType = 1
				} else if (idx == 1) {
					that.shopType = 2
				}
			},
			leixing(data, idx) {
				this.list2idx = idx
				if (idx == 0) {
					this.type = 1
				} else if (idx == 1) {
					this.type = 2
				} else if (idx == 2) {
					this.type = 3
				}
			},
			cityconfirm(e) {
				console.log(e)
				this.city = e.province.label + e.city.label + e.area.label
			},
			subBtn() {
				let that = this
				if (that.city == '') {
					uni.showToast({
						title: '请选择所在城市',
						icon: 'none',
						duration: 2000
					});
				} else if (that.gsName == '' && that.shopType === 1) {
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none',
						duration: 2000
					});
				} else if (that.contacts == '') {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 2000
					});
				} else if (that.phone == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 2000
					});
				} else {
					that.$api.shangwuhezuo({
						type: that.type, //	是	int	合作类型：1城市运营 2推广合作 3其他
						city: that.city, //	是	string	城市
						entity: that.shopType, //	是	int	实体：1企业 2个人
						company: that.gsName, //是	string	公司名称
						contacts: that.contacts, //	是	string	联系人
						tel: that.phone, //	是	string	联系电话
					}).then(res => {
						//uni.showToast({
						//	title: res.data.msg,
						//	icon: 'none',
						//	duration: 2000
						//});
						that.city = ''
						that.gsName = ''
						that.contacts = ''
						that.phone = ''
						
						setTimeout(()=>{
							uni.navigateTo({
								// url: '/subpackageB/pages/businessApply/Applyok'
                url: '/subpackageA/pages/businessApply/Applyok',
							})
						},500)
						
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(180deg, #F5F4F2, #F5F4F2);
		height: 100%;
	}

	.page_bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.ld_img1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100rpx;
		z-index: 2;
	}

	.ld_img2 {
		position: absolute;
		top: 0;
		right: 0;
		width: 100rpx;
		z-index: 2;
	}

	.ld_img3 {
		position: absolute;
		top: 140rpx;
		right: 0;
		width: 100rpx;
		z-index: 2;
	}

	.ruzhu_bg {
		padding: 50rpx;
		text-align: center;
		position: relative;
		z-index: 3;

		image {
			width: 100%;
		}
	}

	.oktijiao {
		position: fixed;
		bottom: 3%;
		width: 90%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}

	.lhb_btn3 {
		margin-top: 30rpx;
		background-image: linear-gradient(to right, #ff7f3b, #fd4f30);
		border-radius: 200rpx;
		text-align: center;
		padding: 20rpx 30rpx;
		color: #ffffff;
		font-size: 32rpx;
	}

	.input_box {
		background-color: #ffffff;
		padding: 5rpx 30rpx;
		width: 92%;
		margin: 30rpx auto;
		border-radius: 20rpx;

		.input_box_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;

			.titme {
				span {
					font-size: 30rpx;
					color: #FF8612;
				}
			}

			.dizhi {
				background-color: #ffffff;
			}

			.dizhi2 {
				display: flex;
				align-items: center;

				.item_name {
					display: flex;
					align-items: center;

					.item_name_sub {
						background-color: #f7f7f7;
						border-radius: 200rpx;
						padding: 10rpx 30rpx;
						color: #999;
						margin-left: 20rpx;
						font-size: 24rpx;
					}

					.xuanzc {
						background-color: #ff7f3b !important;
						color: #fff !important;
					}
				}
			}
		}
	}

	.content_wrap {
		position: relative;
		z-index: 5;
	}

	.top_box {
		padding: 30rpx 20rpx;

		.top_box_item {
			flex: 1;
			text-align: center;
			background-color: #fff;
			border-radius: 10px;
			padding: 24rpx 0;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			view {
				color: #ff7f3b;
			}
		}
	}
</style>